<template>
	<div class="super-table">
		<div class="super-table-header" v-if="$slots['header-left'] || $slots['header-right']" :style="{marginBottom: ($slots['header-right'] ? 0 : 10) +'px'}">
			<div class="super-table-header-left">
				<slot name="header-left"></slot>
			</div>
			<div class="super-table-header-right ui-form-inline">
				<slot name="header-right"></slot>
			</div>
		</div>
		<Table
			ref="table"
			:columns="columns"
			:data="data"
			:height="height"
			:max-height="maxHeight"
			:loading="cloneLoading"
			:border="border"
			:size="size"
			:stripe="stripe"
			:draggable="draggable"
			:span-method="spanMethod"
			:show-summary="showSummary"
			:sum-text="sumText"
			:summary-method="summaryMethod"
			@on-expand="handleExpand"
			@on-selection-change="handleSelectionChange"
			@on-drag-drop="handleDragDrop"
		>
			<template slot="header"><slot name="header"></slot></template>
			<template v-for="item in slots" slot-scope="{row, column, index}" :slot="item.slot">
				<slot :row="row" :column="column" :index="index" :name="item.slot"></slot>
			</template>
		</Table>
	    <!--<div class="super-table-page" v-if="pagination">
			<div class="super-table-page-left">
				<slot name="page-left"></slot>
			</div>
			<Page
				:current="currentPage"
				:page-size="pageSize"
				:total="total"
				@on-change="handleChangePage"
				@on-page-size-change="handleChangePageSize"
			/>
		</div>-->
		<FooterBar class="ui-flex ui-flex-between" v-if="pagination">
			<div class="super-table-page-left">
				<slot name="page-left"></slot>
			</div>
			<Page
				:current="currentPage"
				:page-size="pageSize"
				:total="total"
				show-total
				show-elevator
				show-sizer
				@on-change="handleChangePage"
				@on-page-size-change="handleChangePageSize"
			/>
		</FooterBar>
	</div>
</template>

<script>
import Util from '@/libs/util.js';
import FooterBar from './FooterBar.vue';
export default {
	name: 'superTable',
	components: {
		FooterBar
	},
	props: {
		// 接口路径地址
        path: {
            type: String,
            default: ''
        },
        // 请求参数
        params: {
            type: Object,
            default: function() {
            	return {};
            }
        },
		columns: {
			type: Array,
			default: function() {
				return [];
			}
		},
		stripe: {
			type: Boolean,
			default: false
		},
		border: {
			type: Boolean,
			default: false
		},
		height: Number | String,
		maxHeight: Number | String,
		loading: false,
		size: 'default',
		draggable: false,
		spanMethod: Function,
		showSummary: false,
		sumText: String,
		summaryMethod: Function,
		pagination: {
			type: Boolean,
			default: true
		},
		datas: {
			type: Array,
			default: function() {
				return [];
			}
		}
	},
	data() {
		return {
			data: [],
			// columns插槽
			slots: [],
           	currentPage: 1,
			pageSize: this.params.limit || 10,
			total: 0,
			cloneLoading: true
		}
	},
	mounted() {
		if(this.datas.length > 0) {
			this.data = this.datas;
		}
		// 复制是否需要loading
		this.cloneLoading = this.loading;
		// 获取columns里的slot
		this.slots = this.columns.filter(item => {
			return item.slot;
		})
		// 初始化
		this.init();
	},
	watch: {
        params: {
            handler(cur, old) {
                this.init();
            },
            deep: true
        },
        datas: {
        	handler(cur, old) {
                this.data = cur;
            },
            deep: true
        }
    },
	methods: {
		init() {
			if(!this.path) return false;
			Util.ajax.post(this.API[this.path], this.params).then((res) => {
               	if (this.pagination === true) {
                    this.data = res.data;
                    this.total = res.total;
                    this.currentPage = res.current_page;
                } else {
                    this.data = res;
                }
                this.cloneLoading = false;
                this.$emit('on-loaded');
                this.$emit('on-selection-change', []);
            }).catch((err) => {
                this.cloneLoading = false;
            });
		},
		// 切换页码
		handleChangePage(page) {
            if (this.pagination === true) {
                this.params.page = page;
            }
        },
        // 切换每页条数
        handleChangePageSize(size) {
        	if (this.pagination === true) {
        		this.params.page = 1;
                this.params.limit = size;
            }
        },
		// 展开或收起某一行
		handleExpand(row, status,) {
			this.$emit('on-expand', row, status);
		},
		// 多选，选项发生变化
		handleSelectionChange(selection) {
			this.$emit('on-selection-change', selection);
		},
		// 拖拽排序松开触发
		handleDragDrop(index1, index2) {
			this.$emit('on-drag-drop', index1, index2);
		}
	}
}
</script>

<style lang="less">
.super-table {
	&-header {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10px;
		&-left {
			margin-right: 20px;
			white-space: nowrap;
		}
	}
	&-page {
		display: flex;
		margin-top: 10px;
		justify-content: space-between;
		&-left {
			line-height: 32px;
		}
	}
}
</style>